<template>
  <div style="height:100%">
    <div class="progressContent" style="height:calc(100% - 21px)">
      <!-- <el-breadcrumb separator="/">
                <el-breadcrumb-item ><i class="el-icon-menu"></i><span @click="back" title="点击返回进度列表">项目</span></el-breadcrumb-item>
                <el-breadcrumb-item>进度</el-breadcrumb-item>
      </el-breadcrumb>-->
      <div style="line-height:40px;margin-bottom:20px;">
        <div
          style="height:40px;width:40px;border-radius:100%;background:#BAD4EF;color:#fff;line-height:40px;text-align:center;display:inline-block"
        >
          <i class="el-icon-tickets"></i>
        </div>
        <span style="font-size:18px;font-weight:bold;color:#444;">&nbsp;项目进度</span>
      </div>
      <div class="sidebar" style="margin-left:11px;">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          mode="horizontal"
          theme="dark"
          unique-opened
          @select="changeItem"
        >
          <el-menu-item v-for="item in items" :index="item.index" :key="item.index">{{ item.name }}</el-menu-item>
        </el-menu>
      </div>
      <div class="progressList" style="padding:0 10px">
        <el-button
          icon="el-icon-plus"
          class="addProgress"
          @click="addProgress"
          size="small"
          style="transform:translatex(-10px)"
        >{{addName}}</el-button>
        <el-table :data="progressData" v-if="index==1" key="year" :border="true">
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="dateYear" label="时间"></el-table-column>
          <el-table-column prop="createPerson" label="本年估算投资(万元)" header-align="left" align="right"></el-table-column>
          <el-table-column prop="consContent" label="本年度建设目标"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
             <!-- <i
                class="el-icon-edit caozuo"
                style="text-align:center;width:50px;height:30px;line-height:30px;margin-right:8px;cursor:pointer"
                title="编辑"
                @click="edit(scope.row.pkid)"
              >编辑</i>-->
              <i
                class="el-icon-document caozuo"
                style="text-align:center;width:50px;height:30px;line-height:30px;margin-right:8px;cursor:pointer"
                title="详情"
                @click="detail(scope.row.pkid)"
              >详情</i>
              <i
                class="el-icon-deleteel-icon-delete caozuo"
                style="text-align:center;width:50px;height:30px;line-height:30px;cursor:pointer"
                title="删除"
                @click="deletep(scope.row.pkid)"
              >删除</i>
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="progressData" v-if="index==2" key="month" :border="true">
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="currentDate" label="时间" width="100"></el-table-column>
          <el-table-column prop="total_investment" label="项目预估总投资(万元)" header-align="left" align="right"></el-table-column>
          <el-table-column prop="month_investment" label="本月完成投资(万元)" header-align="left" align="right"></el-table-column>
          <el-table-column prop="month_cumulative_investment" label="累计完成投资(万元)" header-align="left" align="right"></el-table-column>
          <!-- <el-table-column label="凭证查看">
            <template slot-scope="scope">
              <i
                class="el-icon-view caozuo"
                style="text-align:center;width:50px;height:30px;line-height:30px;cursor:pointer"
                title="预览"
                @click="preview(scope.row.pkid)"
              >预览</i>
            </template>
          </el-table-column> -->
          <el-table-column label="操作" align="center" width="300">
            <template slot-scope="scope">
              <i
                class="el-icon-edit caozuo"
                style="text-align:center;width:50px;height:30px;line-height:30px;margin-right:8px;cursor:pointer"
                title="编辑"
                @click="edit(scope.row.pkid)"
              >编辑</i>
              <i
                class="el-icon-delete caozuo"
                style="text-align:center;width:50px;height:30px;line-height:30px;cursor:pointer;margin-right:8px;"
                title="删除"
                @click="deletep(scope.row.pkid)"
              >删除</i>
              <i
                class="el-icon-search caozuo"
                style="text-align:center;width:90px;height:30px;line-height:30px;cursor:pointer"
                title="相关资料"
                @click="briefing(scope.row.pkid)"
              >相关资料</i>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-div">
        <el-pagination
          @current-change="handleCurrentChange"
          :page-size="pagesize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <el-dialog
        :title="title"
        :visible.sync="monthDisable"
        v-if="monthDisable"
        width="1000px"
        top="100px"
      >
        <add-monthProgress
          :projectId="projectId"
          :progressId="progressId"
          :userInfo="userInfo"
          v-on:listenClose="listenMonthClose"
        ></add-monthProgress>
      </el-dialog>
      <el-dialog
        :title="title"
        :visible.sync="yearDisable"
        v-if="yearDisable"
        width="1000px"
        top="100px"
      >
        <add-yearProgress
          :projectId="projectId"
          :progressId="progressId"
          :userInfo="userInfo"
          v-on:listenClose="listenYearClose"
        ></add-yearProgress>
      </el-dialog>
      <el-dialog :visible.sync="mediaDisable" v-if="mediaDisable" width="1000px" top="100px">
        <progress-media :progressId="progressId" v-on:listenClose="listenMediaClose"></progress-media>
      </el-dialog>
      <el-dialog
        :title="title"
        :visible.sync="mediaDisable"
        v-if="mediaDisable"
        width="1000px"
        top="100px"
      >
        <progress-media
          :progressId="progressId"
          :mediaType="mediaType"
          v-on:listenClose="listenMediaClose"
        ></progress-media>
      </el-dialog>
      <el-dialog
        :title="title"
        :visible.sync="yearInfoDisable"
        v-if="yearInfoDisable"
        width="1280px"
        top="100px"
      >
        <year-info :progressId="progressId"></year-info>
      </el-dialog>
      <el-dialog
        :title="title"
        :visible.sync="monthInfoDisable"
        v-if="monthInfoDisable"
        width="1000px"
        top="100px"
      >
        <month-info :progressId="progressId"></month-info>
      </el-dialog>
      <el-dialog title="凭证预览" :visible.sync="pzView" width="1000px" top="100px">
        <img :src="pzUrl" style="width:100%">
      </el-dialog>
    </div>
  </div>
</template>
<script>
import bus from "../../assets/bus.js";
import date_formate from "../tool/Global/dateutil.js";
import { projectProgress, ServiceConfig } from "../tool/Global/app-config.js";
import { XJXQ } from "../../../static/config/config.js";
import {
  queryProjectMediaByScheduleid,
  logoutToLogin,
  queryProMonthScheduleByProjectid,
  queryProYearScheduleByProjectid,
  addProYearSchedule,
  deleteProMonthSchedule,
  deleteProYearSchedule
} from "../tool/Global/app-mgr.js";
//修改为监测经协系统是否已经登陆
import { apiGetUserInfo } from "../tool/Global/app-login-module.js";
import addMonthProgress from "./AddMonthProgress.vue";
import addYearProgress from "./AddYearProgress.vue";
import progressMedia from "./ProgressMedia.vue";
import yearInfo from "./YearProgressInfo.vue";
import monthInfo from "./MonthProgressInfo.vue";
export default {
  props: ["pkid"],
  components: {
    addMonthProgress,
    addYearProgress,
    progressMedia,
    yearInfo,
    monthInfo
  },
  data: function() {
    return {
      items: [
        {
          name: "年计划",
          index: "1"
        },
        {
          name: "月进度",
          index: "2"
        }
      ],
      index: 0,
      addName: "添加年计划",
      progressData: [],
      pagesize: 10,
      pageindex: 1,
      monthDisable: false,
      title: "",
      total: 0,
      yearDisable: false,
      yearInfoDisable: false,
      monthInfoDisable: false,
      progressId: "",
      projectId: "",
      mediaType: "",
      mediaDisable: false,
      userInfo: null,
      pzUrl: "",
      pzView: false
    };
  },
  mounted: function() {
    let ref = this;
    this.busEvent();
    this.projectId = this.pkid;
    this.getUser();
    this.$nextTick(function() {
      ref.getYearByPjtId();
    });
  },
  methods: {
    busEvent() {
      let self = this;
      bus.$on("yearPSear", function(date) {
        var params = {
          pageindex: self.pageindex,
          pagesize: self.pagesize,
          dateYear: date
        };
        queryProYearScheduleByProjectid(self.pkid, params).then(function(
          result
        ) {
          if (result.data.success) {
            self.progressData = result.data.data.datalist;
            self.total = result.data.data.total;
            let i;
            for (i = 0; i < self.progressData.length; i++) {
              self.progressData[i].dateYear = self.progressData[i].dateYear
                ? date_formate.format(
                    new Date(self.progressData[i].dateYear),
                    "yyyy"
                  )
                : "";
            }
          } else {
            self.$message(result.data.message);
          }
        });
      });
      bus.$on("monthPSear", function(date) {
        // let dateMonth = JSON.parse(JSON.stringify(date));
        var params = {
          pageindex: self.pageindex,
          pagesize: self.pagesize,
          dateMonth: date
        };
        queryProMonthScheduleByProjectid(self.pkid, params).then(function(
          result
        ) {
          if (result.data.success) {
            self.progressData = result.data.data.datalist;
            self.total = result.data.data.total;
            let i;
            for (i = 0; i < self.progressData.length; i++) {
              self.progressData[i].currentDate = self.progressData[i]
                .currentDate
                ? date_formate.format(
                    new Date(self.progressData[i].currentDate),
                    "yyyy/MM"
                  )
                : "";
              if (self.progressData[i].currentStage) {
                self.progressData[i].currentStage =
                  projectProgress[ref.progressData[i].currentStage - 1].name;
              }
            }
          } else {
            self.$message(result.data.message);
          }
        });
      });
    },
    back() {
      bus.$emit("leaveProgress");
      bus.$emit("changeLeftItem", 3);
    },
    getYearByPjtId() {
      let ref = this;
      var params = {
        pageindex: this.pageindex,
        pagesize: this.pagesize
      };
      queryProYearScheduleByProjectid(this.pkid, params).then(function(result) {
        if (result.data.success) {
          ref.progressData = result.data.data.datalist;
          ref.total = result.data.data.total;
          let i;
          for (i = 0; i < ref.progressData.length; i++) {
            ref.progressData[i].dateYear = ref.progressData[i].dateYear
              ? date_formate.format(
                  new Date(ref.progressData[i].dateYear),
                  "yyyy"
                )
              : "";
          }
          ref.index = "1";
        } else {
          ref.$message(result.data.message);
        }
      });
    },
    getMonthByPjtId() {
      let ref = this;
      var params = {
        pageindex: this.pageindex,
        pagesize: this.pagesize
      };
      queryProMonthScheduleByProjectid(this.pkid, params).then(function(
        result
      ) {
        if (result.data.success) {
          ref.progressData = result.data.data.datalist;
          ref.total = result.data.data.total;
          let i;
          for (i = 0; i < ref.progressData.length; i++) {
            ref.progressData[i].currentDate = ref.progressData[i].currentDate
              ? date_formate.format(
                  new Date(ref.progressData[i].currentDate),
                  "yyyy/MM"
                )
              : "";
            if (ref.progressData[i].currentStage) {
              ref.progressData[i].currentStage =
                projectProgress[ref.progressData[i].currentStage - 1].name;
            }
          }
          ref.index = "2";
        } else {
          ref.$message(result.data.message);
        }
      });
    },
    changeItem(index) {
      this.pagesize = 10;
      this.pageindex = 1;
      if (index == 1) {
        this.addName = "添加年计划";
        bus.$emit("intoyProgress");
        this.getYearByPjtId();
      } else if (index == 2) {
        this.addName = "添加月进度";
        bus.$emit("intomProgress");
        this.getMonthByPjtId();
      }
    },
    addProgress() {
      this.progressId = null;
      if (this.index == 1) {
        this.yearDisable = true;
        this.title = "添加年计划";
      } else if (this.index == 2) {
        this.monthDisable = true;
        this.title = "添加月进度";
      }
    },
    edit(pkid) {
      this.progressId = pkid;
      if (this.index == 1) {
        this.yearDisable = true;
        this.title = "编辑年计划";
      } else if (this.index == 2) {
        this.monthDisable = true;
        this.title = "编辑月进度";
      }
    },
    deletep(pkid) {
      let ref = this;
      this.$confirm("确认删除？")
        .then(_ => {
          if (ref.index == 1) {
            deleteProYearSchedule(pkid).then(function(result) {
              if (result.data.success) {
                ref.getYearByPjtId();
                ref.$message.message({ message: "删除成功", type: "success" });
              } else {
                ref.$message.error(result.data.message);
              }
            });
          } else if (ref.index == 2) {
            deleteProMonthSchedule(pkid).then(function(result) {
              if (result.data.success) {
                ref.getMonthByPjtId();
                ref.$message.message({ message: "删除成功", type: "success" });
              } else {
                ref.$message.error(result.data.message);
              }
            });
          }
        })
        .catch(_ => {});
    },
    detail(pkid) {
      this.progressId = pkid;
      if (this.index == 1) {
        this.yearInfoDisable = true;
        this.title = "年计划详情";
      } else {
        this.monthInfoDisable = true;
        this.title = "月进度详情";
      }
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      if (this.index == 1) {
        this.getYearByPjtId();
      } else {
        this.getMonthByPjtId();
      }
    },
    listenMonthClose() {
      this.monthDisable = false;
      let ref = this;
      this.getMonthByPjtId();
    },
    listenYearClose() {
      this.yearDisable = false;
      let ref = this;
      this.getYearByPjtId();
    },
    briefing(pkid) {
      this.title = "相关资料";
      this.progressId = pkid;
      this.mediaType = 1;
      this.mediaDisable = true;
    },
    listenMediaClose() {
      this.mediaDisable = false;
      if (this.index == 1) {
        this.getYearByPjtId();
      } else {
        this.getMonthByPjtId();
      }
    },
    getUser() {
      let self = this;
      apiGetUserInfo()
        .then(res => {
          let userInfo = res.data.user;
          if (userInfo.status) {
            var bol = false;
            YanAnAPP.managerId.every(function(item) {
              if (userInfo.sys_role == item) {
                bol = true;
                return false;
              }
            });
            if (bol) {
              self.userInfo = userInfo;
            } else {
              self.$message.error("不是管理用户，请重新登录");
              logoutToLogin().then(function() {
                window.location.href =
                  GeoAPP.Sites.Cas +
                  "/logout?service=" +
                  XJXQ.LoginModuleConfig.loginUrl;
              });
            }
          } else {
            self.$message.error("请先登录");
            window.location.href = XJXQ.LoginModuleConfig.loginUrl;
          }
        })
        .catch(e => {
          self.$message.error("请先登录");
          window.location.href = XJXQ.LoginModuleConfig.loginUrl;
        });
    },
    preview(pkid) {
      let self = this;
      queryProjectMediaByScheduleid(pkid, { mediaType: 9 }).then(function(
        result
      ) {
        if (result.data.data.total) {
          var data = result.data.data.datalist[0];
          self.pzUrl = ServiceConfig.archiveUrl + "/" + data.mediaID;
          self.pzView = true;
        } else {
          self.$message({ message: "该进度没有凭证", type: "error" });
        }
      });
    }
  }
};
</script>

<style scoped>
.btP {
  cursor: pointer;
  margin-left: 18px;
}
.progressContent {
  background: #f5f5f5;
  padding: 10px;
  border: 1px solid #ccc;
  height: calc(100% - 60px);
  border-radius: 5px;
}
.progressContent:hover {
  background-color: #f5f5f5;
}
.progressList {
  margin-top: 10px;
}
.addProgress {
  margin-left: 10px;
  margin-bottom: 10px;
}
.pagination-div {
  text-align: right;
}
.caozuo:hover {
  color: #fff;
  background-color: #409eff;
}
*::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #eee;
}
*::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  /*-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.1);*/
  border-radius: 2px;
  background: #f5f5f5;
}
</style>
<style>
.el-menu--horizontal > .el-menu-item,
.el-menu--horizontal > .el-submenu .el-submenu__title {
  border: 1px solid #ccc !important;
  color: #333;
  box-sizing: border-box;
}
.el-menu--horizontal > .el-menu-item.is-active,
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border: 1px solid #4580d0 !important;
  color: #4580d0;
  box-sizing: border-box;
}
.el-menu--horizontal .el-menu-item {
  height: 30px;
  line-height: 30px;
}
.el-menu--horizontal {
  display: inline-block;
}
.el-table thead {
  color: #555;
}
.tableHead {
  text-align: center;
}
</style>

